<template>
    <view>
        <u-notice-bar mode="horizontal" border-radius="10" speed="100" type="none" :list="notice"></u-notice-bar>
        <u-swiper :list="swiperlist" name="img_src" mode="number" indicator-pos="bottomRight" height="500" img-mode="scaleToFill"></u-swiper>
        <u-gap height="20" bg-color="#fff"></u-gap>
        <u-search placeholder="输入酒名搜索" :show-action="false" @search="search" v-model="keyword"></u-search>
        <u-gap height="20" bg-color="#fff"></u-gap>
        <u-divider color="#dd6161" border-color="#f2f6fc" margin-top="20" margin-bottom="20" fontSize="32" half-width="200">红酒产区</u-divider>
        <u-grid :col="3" style="background-color: #fafafa;">
            <u-grid-item @click="toProductArea(item.id)" v-for="item in areaList" :key="item.id">
                <u-image :src="item.area_image" width="94rpx" height="63rpx">
                    <u-loading slot="loading"></u-loading>
                    <view slot="error" style="font-size: 24rpx;">加载失败</view>
                </u-image>
                <view class="grid-text">{{ item.area_name }}</view>
            </u-grid-item>
        </u-grid>
        <u-divider color="#dd6161" border-color="#f2f6fc" margin-top="20" margin-bottom="20" fontSize="32" half-width="200">最新动态</u-divider>
        <view v-for="item in newArticleList" :key="item.id" @click="toArticleDetail(item.id)" class="article-list">
            <u-image width="180rpx" height="116rpx" :src="item.article_logo">
                <u-loading slot="loading"></u-loading>
                <view slot="error" style="font-size: 24rpx;">加载失败</view>
            </u-image>
            <view class="u-line-1  article-list-title">
                {{ item.article_name }}
                <view class="article-list-title-time">
                    <u-icon name="clock"></u-icon>
                    {{ item.update_time }}
                </view>
            </view>
        </view>
        <u-section :show-line="false" sub-title="查看更多" @click="toArtilceList"></u-section>
        <u-divider margin-top="20" margin-bottom="20" half-width="100%" v-show="isBottom">我是有底线的</u-divider>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isBottom:false,
            keyword: '',
            areaList: [],
            newArticleList: [],
            notice: ['你想寻找的', '我想分享得', '你想品尝的', '我想共享的'],
            swiperlist: []
        };
    },
    methods: {
        toArticleDetail(id) {
            this.$u.route('/pages/articleDetail/articleDetail', {
                id
            });
        },
        toProductArea(area) {
            this.$u.route({
                type: 'to',
                url: '/pages/productlist/productlist',
                params: {
                    area: area
                }
            });
        },
        toArtilceList() {
            this.$u.route({ type: 'switchTab', url: '/pages/article/article' });
        },
        search() {
            if (this.keyword === '') return;
            this.$u.route({
                type: 'to',
                url: '/pages/productlist/productlist',
                params: {
                    keyword: this.$u.trim(this.keyword)
                }
            });
        }
    },
    mounted() {
        this.$u.api.getArticleList({ limit: 2, order: 'create_time' }).then(r => {
            this.newArticleList = r.list;
        });
        this.$u.api.getProductArea({ limit: 6 }).then(r => {
            // console.log(r.list);
            this.areaList = r.list;
        });
        this.$u.api.getCarousel().then(r => {
            this.swiperlist = r.list;
        });
    },
    onReachBottom() {
        this.isBottom = true;
    }
};
</script>

<style lang="scss" scoped>
.badge-icon {
    position: absolute;
    top: 14rpx;
    right: 40rpx;
    width: 30rpx;
    height: 30rpx;
}
.country {
    /* width: 94rpx;
    height: 63rpx; */
}
.article-list {
    padding: 10rpx;
    margin: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    .article-list-title {
        color: #303133;
        width: 350rpx;
        font-size: 32rpx;
        .article-list-title-time {
            color: #c8c9cc;
            font-size: 24rpx;
            text-align: right;
            padding-right: 20rpx;
            padding-top: 20rpx;
            .u-icon {
                padding-right: 8rpx;
            }
        }
    }
}
</style>
